<template>
	<view class="content">
		<view class="submi-from">
			<uni-forms ref="customForm" :rules="rules" :modelValue="formData">
				<uni-forms-item label="用户名" required name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="预定礼厅" required name="bookingRoom">
					<uni-data-select style="background-color: white; " v-model="formData.bookingRoom"
						:localdata="bookingRoomData" @change="onRoomChange" :clear="false"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="开席日期" required name="startTime">
					<uni-datetime-picker type="data" v-model="formData.startTime" placeholder="请选择开席日期" />
				</uni-forms-item>
				<uni-forms-item label="预定类型" required name="bookingType">
					<uni-data-select style="background-color: white; " v-model="formData.bookingType"
						:localdata="bookingTypeData" @change="onTypeChange" :clear="false"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="预定桌数" required name="tableCount">
					<uni-easyinput type="text" v-model="formData.tableCount" placeholder="请输入桌数" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="describes">
					<uni-easyinput type="textarea" v-model="formData.describes" placeholder="请输入描述" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('customForm')">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		data
	} from 'uview-ui/libs/mixin/mixin';

	export default {
		data() {
			return {
				formData: {
					id: 0,
					name: '',
					bookingRoom: null, // 使用 null 而不是空字符串
					startTime: '',
					bookingType: null, // 使用 null 而不是空字符串
					tableCount: '',
					describes: ''
				},
				//预定礼厅
				bookingRoomData: [],
				//预定类型
				bookingTypeData: [],
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名'
						}, {
							validateFunction: function(rule, value, data, callback) {
								// console.log(value)
								// // if (value.length < 2) {
								// // 	callback('请至少勾选两个兴趣爱好')
								// // }
								// // return true
							}
						}]
					},
					bookingRoom: {
						rules: [{
							required: true,
							errorMessage: '请选择礼厅'
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请选择开席日期'
						}]
					},
					tableCount: {
						rules: [{
								required: true,
								errorMessage: '请输入预定桌数'
							}, {
								format: 'number',
								errorMessage: '桌数只能输入数字'
							}

						]
					},
					bookingType: {
						rules: [{
							required: true,
							errorMessage: '请选择开席日期'
						}]
					}
				}
			}
		},
		methods: {
			onChange(e) {
				console.log('选择的值：', e);
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					res.phone = this.formData.phone
					if (this.formData.id) {
						res.id = this.formData.id
						this.editCustomer(res)
					} else {
						this.addCustomer(res)
					}
				})
			},
			//添加客户信息
			async addCustomer(param) {
				const {
					status,
					data,
					msg
				} = await this.$api.customer.addCustomer(param)
				if (status == 200) {
					this.queryCustomer()
					uni.navigateBack()
				} else {
					uni.$u.toast(msg)
					uni.navigateBack()
				}
			},
			//编辑客户信息
			async editCustomer(param) {
				const {
					status,
					data,
					msg
				} = await this.$api.customer.editCustomer(param)
				if (status == 200) {
					// this.queryCustomer()
					uni.navigateBack()
				} else {
					uni.$u.toast(msg)
				}
			},
			//获取选中礼厅数据
			onRoomChange(val) {
				//获取预定礼厅名称
				this.bookingRoomData.forEach((item, index) => {
					if (item.value == val) {
						console.log(item)
					}
				})
			},
			//获取选中类型数据
			onTypeChange(val) {

			},
			/**
			 * 按字典编码查询数据字典，返回数据集
			 * @param {Object} dictCode
			 */
			async queryDictItems(dictCode) {
				const {
					status,
					data,
					msg
				} = await this.$api.dict.queryDictItem(dictCode)
				if (status == 200) {
					this.bookingRoomData = data
				}
			},
			/**
			 * 查询预定类型数据字段
			 * @param {Object} dictCode
			 */
			async queryBookingTypeItems(dictCode) {
				const {
					status,
					data,
					msg
				} = await this.$api.dict.queryDictItem(dictCode)
				if (status == 200) {
					this.bookingTypeData = data
				}
			}
		},
		onLoad(option) {
			//查询礼厅列表
			this.queryDictItems("BOOKING_ROOM")
			this.queryBookingTypeItems("BOOKING_TYPE")
			const userInfo = uni.getStorageSync("userInfo")
			this.formData.name = userInfo.nickname || ''
			this.formData.phone = userInfo.telephone || ''
			var data = this.$store.state.customer
			if (option.id != null && data != '') {
				this.formData = this.$store.state.customer
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		height: 100%;

		.submi-from {
			padding: 15px;
			background-color: #fff;

			button {
				background-color: #FA541C;
			}
		}

	}
</style>